<template>
  <div>
    <!--    全局组件-->
    <all-panel></all-panel>
    <hr/>
    <!--    局部组件 局部组件传值 父传子 -->
    <part-panel :title="title" price="价格"></part-panel>
    <hr/>
    <!--    父传子 循环传值-->
    <part-panel
      v-for="obj in list"
      :key="obj.id"
      :title="obj.title"
      :price="obj.price"
      @subPrice="fn">
    </part-panel>
    <!--    非父子组件通信-->
    <part-two-panel></part-two-panel>
  </div>
</template>

<script>
import PartPanel from "./PartPanel"
import PartTwoPanel from "./PartTwoPanel";

export default {
  name: "BasicApiThree",
  data() {
    return {
      title: '标题',
      list: [
        {
          id: 1,
          title: '标题一',
          price: '99'
        },
        {
          id: 2,
          title: '标题二',
          price: '88'
        }
      ]
    }
  },
  // 注册局部组件
  components: {
    PartPanel,
    PartTwoPanel
  },
  methods: {
    // 处理子组件事件
    fn(price) {
      this.list[0].price = this.list[0].price + price
      this.list[1].price = this.list[1].price + price
    }
  }
}
</script>

<style scoped>

</style>
